<template>
	<div>
        <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
			<el-form-item label="基本信息：">
				<el-select v-model="store.params.marketId" placeholder="请选择市场" >
					<el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item >
				<el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table  :data="shopList" border v-loading="loading">
			<el-table-column prop="shopName" label="店铺名称" ></el-table-column>
		    <el-table-column prop="market.marketName" label="市场名称" ></el-table-column>
			<el-table-column prop="shopMobile" label="联系电话"  ></el-table-column>
            <el-table-column prop="shopAddress" label="店铺地址"  ></el-table-column>
            <el-table-column label="负责人信息" min-width="180">
                <template  slot-scope="scope">
                    <p>负责人姓名：{{scope.row.shopManageName}}</p>
                    <p>联系电话：{{scope.row.shopMobile}}</p>
                </template>
			</el-table-column>
             <el-table-column label="店铺状态">
               	<template   slot-scope="scope">
					<span>{{scope.row.shopState | filteShopState}}</span>
				</template>
			</el-table-column>
            <el-table-column label="在售车辆" >
               	<template   slot-scope="scope">
					<span>{{scope.row.carNum}}辆</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
                    <el-dropdown>
                        <el-button type="primary" size="small">
                            更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                             <el-dropdown-item @click.native="handleEdit(scope.row.shopId)">编辑</el-dropdown-item>
                             <el-dropdown-item @click.native="handleFreeze(scope.row.shopId)">冻结</el-dropdown-item>
                             <el-dropdown-item @click.native="handleRentInfo(scope.row.shopId)">租赁信息</el-dropdown-item>
                             <el-dropdown-item @click.native="goToCarList(scope.row.shopId)">查看销售车辆</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<div class="footer">
		<el-pagination
		  background
		  @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 40]"
	      :page-size="store.params.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="pageTotal">
	    </el-pagination>
	    </div>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        shopList:[],
        pageTotal:0,
        store:{
            marketOptions:[],
            params:{
                pageSize:10,
                pageIndex:1,
                marketId:this.$marketId,
            },
        },
       }
    },
    created(){
        this.$store.commit('getMarketOptions',this.store)
        this.getData();
    },
    methods:{
        getData(){
            this.loading = true;
    		this.$axios.get('/controller/getShopList',{params: this.store.params})
    		.then((res)=>{
                this.shopList = res.data.result;
                 console.log(this.shopList)
    			this.loading = false;
    		})
    		this.$axios.get('/controller/selectShopNum',{params: this.store.params})
    		.then((res)=>{
    			this.pageTotal = res.data.result.total
            })
        },
      	handleSizeChange(val) {
            this.store.params.pageSize = val;
            this.getData();
		},
		handleCurrentChange(val) {
            this.store.params.pageIndex = val;
            this.getData();
        },
        handleEdit(shopId) {
            this.$router.push("/shop/shopForm/"+ shopId)
        },
        goToCarList(){
            this.$router.push("/car")
        },
        handleFreeze(){

        },
        handleRentInfo(){

        }
    },

  };
</script>
